<template>
  <div class="login_container">
    <!-- <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles> -->
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/images/watericon.jpg" alt="" />
      </div>
      <p class="welcome">欢迎使用河湖空间大数据平台</p>
      <div class="loginwords">账户登录</div>
      <!--登录表单区域-->
      <el-form
        ref="resetForm"
        class="login_form"
        formData
        :model="formData"
        :rules="rules"
        label-width="0px"
        @keyup.enter.native="login()"
      >
        <!--用户名-->
        <el-form-item prop="idNumber">
          <el-input
            v-model="formData.phoneNumber"
            placeholder="请输入手机号"
            prefix-icon="el-icon-user-solid"
            clearable
          >
          </el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <el-input
            v-model="formData.password"
            placeholder="请输入密码"
            type="password"
            prefix-icon="el-icon-lock"
            clearable
          >
          </el-input>
        </el-form-item>
        <!--按钮区域-->
        <el-form-item>
          <el-button type="primary" class="btnslogin" @click="login('formData')"
            >登录</el-button
          >
          <!-- <el-button @click="resetForm(formData)">重置</el-button> -->
        </el-form-item>
        <router-link to="register" class="active"
          >没有账户?点击注册</router-link
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "../Api/api";

export default {
  data() {
    return {
      fileList: [],
      formData: {
        phoneNumber: "",
        password: "",
      },
      rules: {
        // phoneNumber: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        // password: [{ required: true, message: '密码不能为空', trigger: 'blur' },
        //   {min:3,max:12,message:"长度在3到12个字符",trigger: 'blur'}]
      },
    };
  },
  methods: {
    // login () {
    //  axios.post('/user/login', this.formData).then(res => {
    //    if (res.data.code === 200) {
    //      this.$router.push({ path: "/home" });
    //    } else {
    //      alert("您输入的用户名或密码错误！");
    //    }
    //  })
    // },
    login() {
      let that = this;
      login(that.formData).then(function (res) {
        console.log(res);
        if (res.data.code === 0) {
          sessionStorage.setItem("phoneNumber", res.data.data.phoneNumber);
            sessionStorage.setItem("username", res.data.data.username);
          that.$router.push({ path: "/components/main" });
        } else {
          alert("您输入的用户名或密码错误！");
        }
      });
    },
    resetForm() {
      this.$refs.resetForm.resetFields();
    },
  },
};
</script>


<style lang="scss" scoped>
.login_container {
  // background: linear-gradient(316deg, #0093e9 0%, #377593 100%);
  background-image: url("../assets/images/timg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.login_box {
  width: 420px;
  height: 330px;
  background-color: #fff;
  border-radius: 25px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}
.welcome {
  margin-top: 40px;
  color: #4f3b3b;
  text-align: center;
}
.loginwords {
  margin-left: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #7a7070;
}

.login_form {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.avatar_box {
  height: 50px;
  width: 50px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 0 10px #ddd;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}
.btnslogin {
  // width: 100%;
  background-color: #0f7beb;
  width: 100%;
  letter-spacing: 20px;
}
.active {
  text-decoration: none;
  font-size: 15px;
  color: #7a7070;
  position: relative;
  top: -10px;
}
</style>

<!--<script>-->
  <!--import axios from "axios";-->
  <!--export default {-->
    <!--name: "login",-->
    <!--data() {-->
      <!--return {-->
        <!--user: {-->
          <!--username: "",-->
          <!--password: ""-->
        <!--}-->
      <!--};-->
    <!--},-->
    <!--created() {},-->
    <!--methods: {-->
      <!--doLogin() {-->
        <!--if (!this.user.username) {-->
          <!--this.$message.error("请输入用户名！");-->
          <!--return;-->
        <!--} else if (!this.user.password) {-->
          <!--this.$message.error("请输入密码！");-->
          <!--return;-->
        <!--} else {-->
          <!--//校验用户名和密码是否正确;-->
          <!--// this.$router.push({ path: "/personal" });-->
          <!--console.log(this.user)-->
          <!--axios-->
            <!--.post("/user/login", this.user-->


            <!--)-->
            <!--.then(res => {-->
              <!--// console.log("输出response.data.status", res.data.status);-->
              <!--if (res.data.code === 200) {-->
                <!--this.$router.push({ path: "/home" });-->
              <!--} else {-->
                <!--alert("您输入的用户名或密码错误！");-->
              <!--}-->
            <!--});-->
        <!--}-->
      <!--}-->
    <!--}-->
  <!--};-->
<!--</script>-->
